<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>数据绑定</title>
  </head>
  <body>

<style media="screen">
.blueP {

color: blue;

}


</style>


<div id="root">

<ul>
 <p class="blueP"> v-for</p>
  <li v-for="name in names" > {{name}} </li>

  <p class="blueP"> v-text</p>
  <li v-for="name in names" v-text="name"> </li>

</ul>

<input type="text" id="input" value="">
<input type="button" id="addBtn" value="添加">


</div>





<!-- vue -->
<!-- <script src="https://unpkg.com/vue@2.4.2"></script> -->
<script src="./js/vue2.4.2.js"></script>


<script >


// h5的dom语法 传统赋值
// document.querySelector('#input').value=data.message;


//使用vue绑定 ， 注意 Vue 的 V大写
var app = new Vue({
 el: '#root',
 data : {
 names:['joy','tom','jane']
 },

 //当vue的实例被挂载时执行
mounted () {

// 监听添加按钮的点击动作
document.querySelector("#addBtn").addEventListener('click', ()=>{

 let name = document.querySelector('#input')

//这里最好再过滤下空格
  app.names.push(name.value)

  name.value='';

});


}

});


</script>


  </body>
</html>
